<!DOCTYPE html>
<html lang="en">
<!--弹出窗口 类型android 中dialog-->
<head>
    <title>pop</title>
    <style type="text/css">
        .shade-layer {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2;
            display: none;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.6;
        }

        .pop-box {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 3; /*这个是为了弹出层的层级高于body里面的内容，显示出来*/
            margin: auto; /*让一个div垂直水平居中*/
            display: none;
            width: 10rem;
            height: 5rem;
            font-size: 0; /*去掉内联元字符带的间距*/
            background: #fff;
        }

        .pop-box span {
            display: inline-block;
            margin-left: 0.5rem;
            padding-left: 1.4rem;
            padding-right: 1.4rem;
            line-height: 1.5rem;
            font-size: 0.75rem;
            color: #fff;
            background-color: #999;
            border-radius: 2px;
            text-align: center;
        }

        .pop-box span:last-child {
            background-color: #fdbc31;
        }

        .delete-pop-box span:last-child {
            background-color: #51b308;
        }
    </style>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
        //引入了jquery
        $(document).ready(function () {
            $(".add-plan").click(function (event) {
                $(".shade-layer").show();
                $(".pop-box").show();
                $("body").css('overflow', 'hidden');
//这个是为了弹出遮罩的时候，body里面的内容不能移动。
            });
            $(".pop-box span").click(function (event) {
                $(".shade-layer").hide();
                $(".pop-box").hide();
                $("body").css('overflow', 'visible');
//弹出层消失点后，body里面的内容可以进行移动。
            });
            $(".shade-layer").click(function (event) {
                $(".shade-layer").hide();
                $(".pop-box").hide();
                $("body").css('overflow', 'visible');
            })
            let $container = $("#container");
            console.log($container)
            for (let i = 0; i < 200; i++) {
                $container.append("<li>" + i + "</li>")
            }
        });
    </script>

</head>
<body>
<!-- 点击按钮，弹出遮罩及弹出框 -->
<span class="add-plan">点击</span>
<div>
    <ul id="container">
    </ul>
</div>

<!-- 弹出的遮罩层 -->
<div class="shade-layer"></div>
<!-- 弹出框 -->
<div class="pop-box">
    <h3>是否加入行程</h3>
    <span>取消</span>
    <span>确认</span>
</div>

</body>
</html>